<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        body {
            background: #940032;
        }

        #counter {
            width: 500px;
            height: 420px;
            background: #939;
            margin: 50px auto 0;
            position: relative;
        }

        #counter h2 {
            line-height: 42px;
            padding-left: 15px;
            font-size: 14px;
            font-family: arial;
            color: #ff3333;
        }

        #counter a {
            font-weight: normal;
            text-decoration: none;
            color: #ff3333;
        }

        #counter a:hover {
            text-decoration: underline;
        }

        #bg {
            width: 280px;
            height: 200px;
            border: 3px solid #680023;
            background: #990033;
            filter: alpha(opacity=80);
            opacity: 0.8;
            position: absolute;
            left: 50%;
            top: 115px;
            margin-left: -141px;
        }

        #counter_content {
            width: 250px;
            position: absolute;
            top: 130px;
            left: 130px;
            z-index: 1;
        }

        #counter_content h3 {
            margin-bottom: 10px;
        }

        #counter_content h3 input {
            border: none;
            width: 223px;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            background: url(img/ico.png) no-repeat;
            text-align: right;
            color: #333;
            font-size: 14px;
            font-weight: bold;
        }

        #counter_content div {
            width: 250px;
        }

        #counter_content input {
            width: 60px;
            height: 30px;
            line-height: 30px;
            float: left;
            background: url(img/ico.png) no-repeat -303px 0;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin: 0 1px 4px 0;
            border: 0;
        }

        #counter_content div > input:hover {
            background: url(img/ico.png) no-repeat -243px 0;
        }

        #counter p {
            width: 500px;
            position: absolute;
            bottom: 20px;
            left: 0;
            color: #ff3333;
            text-align: center;
            font-size: 12px;
        }
    </style>
</head>


<body>

<div id="counter">
    <h2>简易计算</h2>
    <div id="counter_content">
        <h3><input id="input1" type="text" value="0"/></h3>
        <div id="div1">
            <input type="button" value="7" onclick="kick('7')"/>
            <input type="button" value="8" onclick="kick('8')"/>
            <input type="button" value="9" onclick="kick('9')"/>
            <input type="button" value="+" onclick="kick('+')"/>
            <input type="button" value="4" onclick="kick('4')"/>
            <input type="button" value="5" onclick="kick('5')"/>
            <input type="button" value="6" onclick="kick('6')"/>
            <input type="button" value="-" onclick="kick('-')"/>
            <input type="button" value="1" onclick="kick('1')"/>
            <input type="button" value="2" onclick="kick('2')"/>
            <input type="button" value="3" onclick="kick('3')"/>
            <input type="button" value="*" onclick="kick('*')"/>
            <input type="button" value="0" onclick="kick('0')"/>
            <input type="button" value="C" onclick="kick('C')"/>
            <input type="button" value="=" onclick="kick('=')"/>
            <input type="button" value="/" onclick="kick('/')"/>
        </div>
    </div>
</div>
</body>
<script>
    /*
     var num = 10;
     function say() {
     num = 20;
     }
     say();
     alert(num);
     */
    var input = document.getElementById("input1");
    var opt = "";//记录操作符
    var beforeNum = "";//记录之前的数字
    var isClear = false;
    function kick(value) {
        switch (value) {
            case "+":
            case "-":
            case "*":
            case "/":
                //运算符
                opt = value;//记录运算操作符
                beforeNum = input.value; //记录目前文本框的值  因为下一步点击数字将要清空文本框中的值
                isClear = false;
                break;
            case "=":
                input.value = calc(beforeNum, input.value, opt);//计算
                break;
            case "C":
                opt = "";//记录操作符
                beforeNum = "";//记录之前的数字
                isClear = false;
                input.value = "0";//清空所有
                break;
            default: //默认是数字
                input.value = input.value == "0" ? "" : input.value; //处理第一次默认为0
                if (isClear == true || input.value == "") {
                    input.value += value; //连续点数字做累加
                } else {
                    input.value = value;
                }
                isClear = true;
                break;
        }
    }
    function calc(num1, num2, opt) {
        var result = 0;
        switch (opt) {
            case "+":
                result = Number(num1) + num2 * 1;
                break;
            case "-":
                result = Number(num1) - num2 * 1;
                break;
            case "*":
                result = Number(num1) * num2 * 1;
                break;
            case "/":
                result = Number(num1) / num2 * 1;
                break;
        }
        return result;
    }
</script>
</html>